<template>
    <div class="cartfoot">
        <div class="box"><span>共{{totalMount}}件 金额:</span>
            <div>{{totalPrice}}<span>元</span></div>
        </div>
        <div class="continue" @click="go" >继续购物</div>
        <div class="settle" @click="al">去结算</div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name:'CartFoot',
    computed:{
        ...mapState(['totalPrice','totalMount'])
    },
    methods: {
        go(){
            this.$router.push('/classify')
        },
        al(){
            alert('需前往小米商城网页')
        }
    },
}
</script>

<style scoped>
    .cartfoot{
        display: flex;
        height: 100%;
    }
    .box {
        flex:1;
        height: 100%;
        text-align: center;
        padding-top: .312rem;
    }
    .box div {
        font-size: .832rem;
        color: #ff5722;
    }
    .box span {
        font-size: .54rem;
        color: #999;
    }
    .continue {
        flex:1;
        height: 100%;
        font-size: .6rem;
        line-height: 2.08rem;
        text-align: center;
        color: #333;
        background-color: #f4f4f4;
    }
    .settle {
        flex:1;
        height: 100%;
        font-size: .58rem;
        line-height: 2.08rem;
        text-align: center;
        color: #fff;
        background-color: #ff6700;
    }
</style>